<template>
  <div class="add-goods">
    <mt-header :title="title">
      <router-link to="/goods" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    
    <div class="add-good-list">
      <mt-field label="商品名称" placeholder="请输入商品名称" v-model="name"></mt-field>
      <mt-field label="商品价格" type="number" placeholder="请输入商品价格" v-model="price"></mt-field>
      <selected v-if="showsele" title="商品分类" :catname="catname" :valueArr="categoryArr" @selectTexted="selsectValue"></selected>
      <upload-img text="添加图片" @imgurl="getImgurl" :imgUrl="imgUrl"></upload-img>
      <mt-button class="btn-tj" type="primary" @click="tj">完成</mt-button>
    </div>
    
  </div>
</template>

<script>
import selected from 'components/common/selected.vue'
import uploadImg from 'components/common/uploadImg.vue'
import axios from 'axios'
import mySearch from 'components/common/mySearch.vue'
export default {
  data() {
      return {
        name:'',
        price:'',
        searchValue:'',
        imgUrl:'',
        category:[],
        categoryArr:[],
        catname:'请选择',
        goodsid:0,
        title:'添加商品',
        showsele:false
      }
    },
    mounted() {
      this.goodsid = this.$route.params.id
      if(this.goodsid != 0){
        this.title = "修改商品"
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,"good_id" : this.goodsid}
        axios.post("/api/get_good_info",params).then((res) => {
          res = res.data
          let result = res.result
          if(result == 'success'){
            let info = res.data.info
            this.name = info.goods_name
            this.price = info.sell_price
            this.imgUrl = info.good_image
            this.catname = info.catname
            this.showsele = true
          }
          // res = res.data
          // let result = res.result
          // if(result == 'success'){
          //   let arr = res.data.list
          //   for(let item of arr){
          //     this.category.push(item)
          //     this.categoryArr.push(item.cnname)
          //   }
          // }
        })
      }
      let token = localStorage.getItem("access_token");
      axios.post("/api/get_category").then((res) => {
        res = res.data
        let result = res.result
        if(result == 'success'){
          this.showsele = true
          let arr = res.data.list
          for(let item of arr){
            this.category.push(item)
            this.categoryArr.push(item.cnname)
          }
        }
      })
    },
    methods: {
      selsectValue(msg){
        this.catname = msg
        for(let sele of this.category){
          if(msg==sele.cnname){
            this.searchValue = sele.id
          }
        }

      },
      getImgurl(msg){
        this.imgUrl = msg
      },
      tj(){
        
        if(this.goodsid!=0){
          //这是修改
          let token = localStorage.getItem("access_token");
          let params = {"access_token": token,"good_id":this.goodsid,"catid" : this.searchValue,"goods_name" : this.name,"sell_price":this.price,"good_image":this.imgUrl}
          axios.post("/api/init_good",params).then((res) => {
            res = res.data
            if(res.result == 'success'){
              this.$router.push('/goods')
            }
          })
        }else{
          //这是添加
          let token = localStorage.getItem("access_token");
          let params = {"access_token": token,"catid" : this.searchValue,"goods_name" : this.name,"sell_price":this.price,"good_image":this.imgUrl}
          axios.post("/api/add_good",params).then((res) => {
            res = res.data
            if(res.result == 'success'){
              this.$router.push('/goods')
            }
          })
        }
      }
    },
    components:{
      mySearch,
      uploadImg,
      selected
    }
}
</script>

<style lang="stylus">
.add-goods
  background:#f2f2f2
  height:100%
  width:100%
  position:absolute
  top:0
  left:0
  z-index:10
  .mint-header
    color:rgb(104, 104, 104)
    background:#fff
    border-bottom:1px solid #ccc
    font-size:18px
    letter-spacing:2px
    box-shadow: 1px 3px 5px #eee;
    label,span
      color:#26a2ff
  .add-good-list
    .btn-tj
      margin:20px 5%
      width:90%

</style>